diff options
Diffstat (limited to 'src/routes/projects/[id]')
| -rw-r--r-- | src/routes/projects/[id]/+page.svelte | 28 |
1 files changed, 25 insertions, 3 deletions
diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte index 8d62a39..7d9a146 100644 --- a/src/routes/projects/[id]/+page.svelte +++ b/src/routes/projects/[id]/+page.svelte @@ -13,6 +13,7 @@ } from '$lib/shared/routine-metrics'; import SectionTitle from '$lib/components/SectionTitle.svelte'; import { formatDayMonth } from '$lib/shared/temporal'; + import { filterByName } from '$lib/shared/filter-items'; let { data, form } = $props(); @@ -35,6 +36,11 @@ (a, b) => b.overdueRatio - a.overdueRatio || a.name.localeCompare(b.name), ); } + + let routineSearch = $state(''); + const filteredRoutines = $derived( + filterByName(sorted(data.routines), routineSearch), + ); </script> <main> @@ -102,8 +108,17 @@ <p class="error">{form.error}</p> {/if} + <input + class="form-input routine-search" + type="search" + bind:value={routineSearch} + placeholder="Rechercher une routine..." + autocomplete="off" + aria-label="Rechercher parmi les routines" + /> + <ul class="item-list"> - {#each sorted(data.routines) as routine (routine.id)} + {#each filteredRoutines as routine (routine.id)} <Row style="flex-wrap: wrap; padding: 0.75rem 1rem;"> <form method="POST" action="?/complete" use:enhance> <input type="hidden" name="id" value={routine.id} /> @@ -133,8 +148,10 @@ {/each} </ul> - {#if data.routines.length === 0} - <p class="empty">Aucune routine</p> + {#if filteredRoutines.length === 0} + <p class="empty"> + {data.routines.length === 0 ? 'Aucune routine' : 'Aucune correspondance.'} + </p> {/if} {#if data.archived.length > 0} @@ -220,6 +237,11 @@ flex-shrink: 0; } + .routine-search { + width: 100%; + margin-bottom: 0.75rem; + } + .page-footer { margin-top: 2rem; display: flex; |